var profile = ( 
  <div>
    <img src="avatar.png" className="profile"/>
    <h3 className="title">{[user.firsName,user.lastName].join(' ')}</h3>
  </div> 
)
// 运行 babel --plugins transform-react-jsx dome.jsx  命令 看结果
/* jsx 语法转换成 vnode
  var profile = React.createElement(
    "div",
    null,
    React.createElement("img", { src: "avatar.png", className: "profile" }),
    React.createElement(
      "h3",
      { className: "title" },
      [user.firsName, user.lastName].join(' ')
    )
  );
*/
export default class InputComponent extends PureComponent{
  render() {
    return (
      <React.Fragment>
        <input type="text" 
          value={this.state.title} 
          onChange={event => this.changeHandle(event.target.value)}
        />
        <button onClick={this.clickHandle}>submit</button>
      </React.Fragment>
    )
  }
}
// 运行 babel --plugins transform-react-jsx dome.jsx  命令 看结果
/* jsx 语法转换成 vnode
export default class InputComponent extends PureComponent {
  render() {
    return React.createElement(
      React.Fragment,
      null,
      React.createElement("input", { type: "text",
        value: this.state.title,
        onChange: event => this.changeHandle(event.target.value)
      }),
      React.createElement(
        "button",
        { onClick: this.clickHandle },
        "submit"
      )
    );
  }
}
*/
// 重命名 React.createElement()
/* @jsx h */
var profile = ( 
  <div>
    <img src="avatar.png" className="profile"/>
    <h3 className="title">{[user.firsName,user.lastName].join(' ')}</h3>
  </div> 
)
// 运行 babel --plugins transform-react-jsx dome.jsx  命令 看结果
// jsx 语法转换成 vnode 
  /* @jsx h */
/*   
  var profile = h(
    "div",
    null,
    h("img", { src: "avatar.png", className: "profile" }),
    h(
      "h3",
      { className: "title" },
      [user.firsName, user.lastName].join(' ')
    )
  );
 */

 // JSX 组件引入编译
import List from '../components/todo/list';
import Input from '../components/todo/input';
function render() {
  return (
    <div>
      <List addTitle={title => this.addTitle(title)}/>
      <Input data={this.state.list}/>
    </div>
  )
}
// 运行 babel --plugins transform-react-jsx dome.jsx  命令 看结果
// jsx 语法转换成 vnode 
// 组件引入解析预览
/* 
  import List from '../components/todo/list';
  import Input from '../components/todo/input';
  function render() {
    return React.createElement(
      "div",
      null,
      React.createElement(List, { addTitle: title => this.addTitle(title) }),
      React.createElement(Input, { data: this.state.list })
    );
  }
*/